<template>
    <div>
        <div>
            <p style="text-align: left">模版管理</p>
            <div style=" border-bottom:1px solid grey; "></div>
            <div class="filter-top">
                <el-dropdown @command="handleClick">
                <span style="border: 1px solid grey;padding: 5px;width: 100px">
                    {{selectCategoryName}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                    <el-dropdown-menu
                            slot="dropdown">
                        <el-dropdown-item
                                v-for="(item,index) in templateTypeList"
                                :command="index"
                                :key="index">
                            {{item.tradeName}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button style="margin-left: 20px" @click="startQuery">查询</el-button>
            </div>
            <el-table :data="tableData" border style="margin-top: 20px;padding: 1px">
                <el-table-column prop="templateId" label="模版ID" width="200px">

                </el-table-column>
                <el-table-column label="预览图" width="150px">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.preViewUrl" @click="showPreview(scope.row)" style="width: 100%" lazy/>
                    </template>
                </el-table-column>
                <el-table-column prop="templateName" label="名称" width="200px">

                </el-table-column>
                <el-table-column prop="tradeId" label="模版分类" width="100px">

                </el-table-column>
                <el-table-column prop="templatePages" label="页数" width="100px">

                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" width="100px">

                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="delTemplate(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 50px"
                    layout="prev, pager, next"
                    :page-size="10"
                    @current-change="queryTemplate"
                    :total="totalPages">
            </el-pagination>
        </div>
        <div style="height: 500px">
            <el-dialog
                    @close="openSrcoll()"
                    title="预览模版"
                    class="abow_dialog"
                    :visible.sync="previewTemplateDialog"
                    width="30%"
                    center>
                <el-image v-for="(item ,index) in previewUrlList " :key="index" :src="item" lazy></el-image>
            </el-dialog>
        </div>
        <div>
            <el-dialog
                    :visible.sync="delDialog"
                    title="确认删除">
                <el-button @click="handleDelDialogClick(true)">确认</el-button>
                <el-button @click="handleDelDialogClick(false)">取消</el-button>
            </el-dialog>
        </div>
        <div>
            <el-dialog
                    :visible.sync="editDialog"
                    title="确认修改">
                <el-button @click="handleEditDialogClick(true)">确认</el-button>
                <el-button @click="handleEditDialogClick(false)">取消</el-button>
            </el-dialog>
        </div>
    </div>

</template>

<script>
    import request from '../request'

    const templateTypeList = [
        {
            id: 1,
            tradeId: "100",
            parentId: "0",
            tradeName: "推荐"
        },
        {
            id: 8,
            tradeId: "101",
            parentId: "0",
            tradeName: "医疗健康"
        },
        {
            id: 13,
            tradeId: "102",
            parentId: "0",
            tradeName: "党政建设"
        },
        {
            id: 19,
            tradeId: "103",
            parentId: "0",
            tradeName: "军事警察"
        },
        {
            id: 25,
            tradeId: "104",
            parentId: "0",
            tradeName: "企业文化"
        },
        {
            id: 31,
            tradeId: "105",
            parentId: "0",
            tradeName: "校园教育"
        },
        {
            id: 36,
            tradeId: "106",
            parentId: "0",
            tradeName: "其他"
        }];

    export default {
        name: "Template",
        data: function () {
            return {
                templateTypeList,
                selectCategoryName: '推荐',
                selectItem: {
                id: 1,
                    tradeId: "100",
                    parentId: "0",
                    tradeName: "推荐"
            },
                previewUrlList: [
                    'http://lfmhprodl.mylafe.com/1566560189247A25070506_0.png',
                    'http://lfmhprodl.mylafe.com/1566560189247A25070506_0.png',
                    'http://lfmhprodl.mylafe.com/1566560189247A25070506_0.png',
                ],
                previewTemplateDialog: false,
                delDialog: false,
                editDialog: false,
                tableData: [],
                pageIndex:1,
                totalPages:0,
                selectTemplate:{

                }

            }
        },
        methods: {
            handleClick: function (index) {
                console.log(index)
                this.selectCategoryName = this.templateTypeList[index].tradeName
                this.selectItem = {...this.templateTypeList[index]}
            },


            startQuery: function () {
                this.queryTemplate(1,true)
            },
            queryTemplate(pageIndex,isUpdataTotal){

                request.get('template/queryTemplateByWeb/'+this.selectItem.tradeId+'100'+'/'+pageIndex,(data)=>{
                    if (isUpdataTotal){
                        this.totalPages=data.totalNums;
                    }
                    this.tableData=data.shopTemplateDTOS.map(item=>{
                        return {
                            ...item,
                            preViewUrl: JSON.parse(item.templateImgs)[0]
                        }
                    })
                });
            },
            addTemplate: function () {
                alert('添加' + this.selectItem.name)
            },
            editTemplate: function (templateInfo) {
                console.log(templateInfo.url)
                this.editDialog = true
                this.selectTemplate=templateInfo
            },
            delTemplate: function (templateInfo) {
                console.log(templateInfo)
                this.delDialog = true
                this.selectTemplate=templateInfo
            },
            showPreview: function (templateInfo) {
                this.previewTemplateDialog = true
                this.previewUrlList=JSON.parse(templateInfo.templateImgs)
            },
            handleDelDialogClick(isDel) {
                if (isDel) {
                    request.post('template/delTemplate/'+this.selectTemplate.templateId,()=>{
                        this.delDialog=false
                    })
                }else {
                    this.delDialog = false
                }


            },
            handleEditDialogClick(isEdit) {
                if (isEdit) {
                    alert("修改")
                }
                this.editDialog = false
            },
            openSrcoll(){
                var mo=function(e){e.preventDefault();};
                document.body.style.overflow='';//出现滚动条
                document.removeEventListener("touchmove",mo,false);
            }

        }
    }
</script>

<style scoped>
    .filter-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
    }

    li {
        list-style: none
    }

    ul {
        padding-inline-start: 5px;
        padding-inline-end: 5px;

    }


</style>
<style lang="scss">
    .abow_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;

        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
            font-size: 0px;
        }

        .el-dialog {
            margin: 0 auto !important;
            height: 90%;
            overflow: hidden;
        }
    }
</style>
